<template>
  <div class="container center">
    <ul class="menu">
      <menu-item :treeData="treeData"></menu-item>
    </ul>
  </div>
</template>

<script setup>
import menuItem from '../components/menuItem.vue'
import { reactive } from "vue";

const treeData = reactive({
  name: "Web开发",
  children: [
    {
      name: "前端开发技术",
      children: [
        { name: "HTML" },
        { name: "CSS" },
        {
          name: "JavaScript",
          children: [{ name: "ES6" }, { name: "Vue.js" }, { name: "jQuery" }],
        },
      ],
    },
    {
      name: "后端开发技术",
      children: [{ name: "Node.js" }, { name: "Python" }, { name: "Java" }],
    },
    { name: "工程化技术" },
  ],
});
</script>

<style >
*,
*::after,
*::before {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.container {
  margin-top: 50px;
  /* min-height: 100vh; */
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

ul {
  list-style: none;
  padding: 0px;
}

.menu {
  width: 100%;
  max-width: 600px;
  margin: auto;
  background: #bbb;
}

.menu label {
  position: relative;
  display: block;
  padding: 18px 18px 18px 45px;
  color: #000;
  cursor: pointer;
}

.menu label::before {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
  font-size: 20px;
  line-height: 1;
  height: 22px;
}

.menu li.item > label::before {
  content: "-";
}

.menu li.folder > label::before {
  content: ">";
}

.menu label.open::before {
  transform: translateY(-45%) rotate(90deg);
}

.menu ul {
  background: #ddd;
  padding-left: 20px;
}

.slide-enter-active {
  transition-duration: 1s;
}

.slide-leave-active {
  transition-duration: 0.5s;
}

.slide-enter-to,
.slide-leave-from {
  max-height: 500px;
  overflow: hidden;
}

.slide-enter-from,
.slide-leave-to {
  max-height: 0;
  overflow: hidden;
}
.menu label::before {
  transition: transform 0.3s;
}
</style>
